<style lang="scss" scoped>
  .edit-class {
    font-size: 1.2em;
    margin-top: 0.2em;
    margin-right: 0.4em;
    color: #15A4FA;
    cursor: pointer;
  }

  .del-class {
    font-size: 1.2em;
    color: rgb(217, 83, 79);
    cursor: pointer;
  }
  .h-button{
    display: inline-block;
    height: 100px;
    width: 100px;
    background: none;
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid #dfdfdf;
    padding: 0 0 20px;
    overflow:hide;
  img{
    width: 50%;
    margin: 10px auto;
  }
  span{
    display: inline-block;
    width: 100%;
    line-height: 30px;
    color: #fff;
  }
  }
  .has-addons{
    height:30px;
  span{
    position:absolute;
    right:0;
  label{
    width: auto;
    height: 30px;
    display: inline-block;
    margin: 0 10px;
    line-height: 30px;
  }
  }
  }
  td,th{

    text-align: center;
  }
</style>
<style>
  .cell-bl-6{
    width: 16.2%;
    display: inline-block;
    text-align: center;
  }
</style>
<template>
  <main>
    <section style="padding-bottom: 80px">
      <div class="box">
        <p class="control has-addons">
          <span>
            <label for="">用户名:</label><input class="input" type="text" placeholder="Name">
            <label for="">时间段:</label><datepicker :inputClass="{ test: true }" v-model="value"></datepicker>
            <label for=""> 至 </label><datepicker :inputClass="{ test: true }" v-model="value"></datepicker>
            <a class="button is-info">查询</a>
          </span>
        </p>
      </div>
      <div class="tile is-ancestor">
        <div class="tile is-parent is-12">
          <article class="tile is-child box">
            <h4 class="title is-4">性能监控</h4>
            <echart :options="polar"></echart>
          </article>
        </div>
      </div>


      <div class="tile is-ancestor animated">
        <div class="tile is-parent is-3">
          <article class="tile is-child box">
            <h4 class="title is-5">筛选条件</h4>
            <div class="block is-flex">
              <collapse>
                <collapse-item title="Components">
                  <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                  </ul>
                </collapse-item>
                <collapse-item title="Elements">
                  <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                  </ul>
                </collapse-item>
                <collapse-item title="Nests">
                  <collapse>
                    <collapse-item title="Nest Child">
                      <ul>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                      </ul>
                    </collapse-item>
                  </collapse>
                </collapse-item>
              </collapse>
            </div>
          </article>
        </div>
        <div class="tile is-parent is-9">
          <article class="tile is-child box">
            <h4 class="title is-5">日志统计分析</h4>
            <div class="table-responsive">
              <table class="table is-bordered is-striped is-narrow">
                <thead>
                <tr>
                  <th>Duration</th>
                  <th>Search Subject</th>
                  <th>Port/Protocol</th>
                  <th>Traffic Summary</th>
                  <th>Port/Protocol</th>
                  <th>Peer</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td class="is-icon">
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    10.9.173.12
                  </td>
                  <td>
                    676767/TCP
                  </td>
                  <td>
                    343KB|98packets<br>
                    <i class="fa fa-long-arrow-left "></i><br>
                    HTTPS<br>
                    <i class="fa fa-long-arrow-right"></i><br>
                    343KB|98packets
                  </td>
                  <td>
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    12.0.9.87
                  </td>
                </tr>
                <tr>
                  <td class="is-icon">
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    10.9.173.12
                  </td>
                  <td>
                    676767/TCP
                  </td>
                  <td>
                    343KB|98packets<br>
                    <i class="fa fa-long-arrow-left "></i><br>
                    HTTPS<br>
                    <i class="fa fa-long-arrow-right"></i><br>
                    343KB|98packets
                  </td>
                  <td>
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    12.0.9.87
                  </td>
                </tr>
                <tr>
                  <td class="is-icon">
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    10.9.173.12
                  </td>
                  <td>
                    676767/TCP
                  </td>
                  <td>
                    343KB|98packets<br>
                    <i class="fa fa-long-arrow-left "></i><br>
                    HTTPS<br>
                    <i class="fa fa-long-arrow-right"></i><br>
                    343KB|98packets
                  </td>
                  <td>
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    12.0.9.87
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </article>
        </div>
      </div>
    </section>



    <back-to-top target=".is-child .wysiwyg">
      <button class="button">UP</button>
    </back-to-top>
  </main>
</template>

<script>
  import { BackToTop } from 'vue-bulma-jump'
  import Tooltip from 'vue-bulma-tooltip'
  import Echart from 'vue-echarts'
  import Datepicker from 'vue-bulma-datepicker'
  import { Collapse, Item as CollapseItem } from 'vue-bulma-collapse'
  export default {
    data () {
      let builderJson = {
        all: 10887,
        charts: {
          map: 3237,
          lines: 2164,
          bar: 7561,
          line: 7778,
          pie: 7355,
          scatter: 2405,
          candlestick: 1842,
          radar: 2090,
          heatmap: 1762,
          treemap: 1593,
          graph: 2060,
          boxplot: 1537,
          parallel: 1908,
          gauge: 2107,
          funnel: 1692,
          sankey: 1568
        },
        components: {
          geo: 2788,
          title: 9575,
          legend: 9400,
          tooltip: 9466,
          grid: 9266,
          markPoint: 3419,
          markLine: 2984,
          timeline: 2739,
          dataZoom: 2744,
          visualMap: 2466,
          toolbox: 3034,
          polar: 1945
        },
        ie: 9743
      }

      let downloadJson = {
        "echarts.min.js": 17365,
        "echarts.simple.min.js": 4079,
        "echarts.common.min.js": 6929,
        "echarts.js": 14890
      }

      let themeJson = {
        "dark.js": 1594,
        "infographic.js": 925,
        "shine.js": 1608,
        "roma.js": 721,
        "macarons.js": 2179,
        "vintage.js": 1982
      }

      let waterMarkText = 'ECHARTS'

      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      canvas.width = canvas.height = 100
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.globalAlpha = 0.08
      ctx.font = '20px Microsoft Yahei'
      ctx.translate(50, 50)
      ctx.rotate(-Math.PI / 4)
      ctx.fillText(waterMarkText, 0, 0)

      return {
        value: '2016-12-12',
        polar: {
          backgroundColor: {
            type: 'pattern',
            image: canvas,
            repeat: 'repeat'
          },
          tooltip: {},
          title: [{
            text: '在线构建',
            subtext: '总计 ' + builderJson.all,
            x: '25%',
            textAlign: 'center'
          }, {
            text: '各版本下载',
            subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
              return all + downloadJson[key];
            }, 0),
            x: '75%',
            textAlign: 'center'
          }, {
            text: '主题下载',
            subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
              return all + themeJson[key];
            }, 0),
            x: '75%',
            y: '50%',
            textAlign: 'center'
          }],
          grid: [{
            top: 50,
            width: '50%',
            bottom: '45%',
            left: 10,
            containLabel: true
          }, {
            top: '55%',
            width: '50%',
            bottom: 0,
            left: 10,
            containLabel: true
          }],
          xAxis: [{
            type: 'value',
            max: builderJson.all,
            splitLine: {
              show: false
            }
          }, {
            type: 'value',
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
              show: false
            }
          }],
          yAxis: [{
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
              interval: 0,
              rotate: 30
            },
            splitLine: {
              show: false
            }
          }, {
            gridIndex: 1,
            type: 'category',
            data: Object.keys(builderJson.components),
            axisLabel: {
              interval: 0,
              rotate: 30
            },
            splitLine: {
              show: false
            }
          }],
          series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
              normal: {
                position: 'right',
                show: true
              }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.charts[key];
            })
          }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
              normal: {
                color: '#eee'
              }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.all - builderJson.charts[key];
            })
          }, {
            type: 'bar',
            stack: 'component',
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              normal: {
                position: 'right',
                show: true
              }
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.components[key];
            })
          }, {
            type: 'bar',
            stack: 'component',
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#eee'
              }
            },
            data: Object.keys(builderJson.components).map(function (key) {
              return builderJson.all - builderJson.components[key];
            })
          }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '25%'],
            data: Object.keys(downloadJson).map(function (key) {
              return {
                name: key.replace('.js', ''),
                value: downloadJson[key]
              }
            })
          }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '75%'],
            data: Object.keys(themeJson).map(function (key) {
              return {
                name: key.replace('.js', ''),
                value: themeJson[key]
              }
            })
          }]
        }
      }
    },
    methods: {
    },
    computed: {
    },
    components: {BackToTop, Tooltip, echart: Echart, Datepicker, Collapse, CollapseItem},
    mounted () {
      this.$nextTick(function () {
      })
    }
  }
</script>
